<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的分类</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <!--引入adminkit模板-->
    <link href="adminkit/css/app.css" rel="stylesheet">
    <style>
        td.details-control {
            background: url('background/plugins/datatables/img/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('background/plugins/datatables/img/details_close.png') no-repeat center center;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body >
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">后台管理</span>
            </a>

            <ul class="sidebar-nav">

                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/dashboard}">
                        <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">首页</span>
                    </a>
                </li>


                <li class="sidebar-item">
                    <a class="sidebar-link" href="/publishedArticleManage">
                        <i class="align-middle" data-feather="book"></i> <span class="align-middle">文章管理</span>
                    </a>
                </li>

                <li class="sidebar-item active">
                    <a class="sidebar-link" href="/kindManage">
                        <i class="align-middle" data-feather="credit-card"></i> <span class="align-middle">分类管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/tagManage">
                        <i class="align-middle" data-feather="tag"></i> <span class="align-middle">标签管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/commentManage}">
                        <i class="align-middle" data-feather="message-square"></i> <span class="align-middle">评论管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/frontInfo">
                        <i class="align-middle" data-feather="airplay"></i> <span class="align-middle">外观管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/statistics}">
                        <i class="align-middle" data-feather="box"></i> <span class="align-middle">统计</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/adminInfo">
                        <i class="align-middle" data-feather="user"></i> <span class="align-middle">个人信息管理</span>
                    </a>
                </li>
            </ul>


        </div>
    </nav>
    <div class="main">
        <!-- top bar navigation -->
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>
            <a href="/" class="btn btn-outline-info" disabled>返回前台首页</a>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="message-square"></i>
                                <span class="indicator" >[[${session.unReadCount}]]</span>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                            <div class="dropdown-menu-header">
                                <div class="position-relative">
                                    [[${session.unReadCount}]]条新评论
                                </div>
                            </div>
                            <div class="list-group">
                                <a th:href="@{/commentManage}" class="list-group-item" th:each="comment:${session.unReadComment}">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-danger" data-feather="alert-circle"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">[[${comment.name}]]</div>
                                            <div class="text-muted small mt-1">[[${comment.content}]]</div>
                                            <div class="text-muted small mt-1">[[${ #dates.format(comment.time,'yyyy年MM月dd日 ')}]]</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a th:href="@{/commentManage}" class="text-muted">所有评论</a>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown" >
                            <img th:src="${session.admin.img}" class="avatar img-fluid rounded mr-1"  th:alt="${session.admin.name}"/> <span class="text-dark">[[${session.admin.name}]]</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="/logout">Log out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>


        <div class="content-page" style="margin: 0px" >

            <!-- Start content -->
            <div class="content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-xl-12">
                            <div >
                                <h1 class="main-title float-left">
                                    <i class="fa fa-tasks bigfonts"></i> 分类 &ensp;
                                </h1>
                                <ol class="breadcrumb float-right">
                                    <li class="breadcrumb-item">分类</li>
                                    <li class="breadcrumb-item"><a th:href="@{/tagManage}">全部</a></li>
                                </ol>

                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xs-12 col-sm-4 col-md-4">
                            <div class="card mb-3">
                                <div class="card-header">
                                    <h3> 添加分类</h3>
                                </div>

                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="name">名称</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off">
                                        <!--                                    <small class="text-danger">注意：名称为必填项</small>-->
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-4">
                                            <th:block th:if="${null == article}">
                                                <img id="kindCoverImg" th:src="@{/background/images/img-upload.png}"
                                                     style="height: 64px;width: 64px;">
                                            </th:block>
                                            <th:block th:unless="${null == article}">
                                                <img id="kindCoverImg" th:src="${article.getImg()}"
                                                     style="width:160px ;height: 160px;display:block;">
                                            </th:block>
                                        </div>
                                        <div class="col-sm-4">
                                            <button class="btn btn-info" style="margin-bottom: 5px;"
                                                    id="uploadKindCoverImg">
                                                <i class="fa fa-picture-o"></i>&nbsp;上传分类主图
                                            </button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">描述信息</label>
                                        <textarea id="info" class="form-control" style="height: 120px"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" onclick="addKind()" class="btn btn-primary"><i class="fa fa-plus"></i> 添加</button>
                                    </div>
                                </div>
                            </div><!-- end card-->
                        </div>

                        <div class="col-xs-12 col-sm-8 col-md-8">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="col-lg-12 col-lg-offset-1">
                                        <form class="form-inline">
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="searchMsg" placeholder="分类名">
                                            </div>
                                            <button type=button class="btn btn-success" id="searchButton">查询</button>

                                        </form>


                                    </div>
                                    <div class="table-responsive">
                                        <table id="kindsTable" class="table table-bordered table-hover display" style="text-align: center">
                                            <thead>
                                            <tr>
                                                <th class="text-center">序号</th>
                                                <th>名称</th>
                                                <th>封面图片</th>
                                                <th>简介</th>
                                                <th>文章总数</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>

                                </div>
                            </div><!-- end card-->
                        </div>
                    </div>

                </div>
                <!-- END container-fluid -->

            </div>
            <!-- END content -->

        </div>
        <!-- END content-page -->



    </div>
</div>

<!-- END main -->
<!--引入adminkit模板-->
<script src="adminkit/js/app.js"></script>

<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>
<script src="common/js/jquery.dataTables.min.js"></script>
<script src="common/js/dataTables.bootstrap4.min.js"></script>
<script src="common/js/kinds.js"></script>

<script src="common/js/public.js"></script>
<script src="background/ajaxupload/ajaxupload.js"></script>


<script type="text/javascript">
    //解决下拉菜单不显示
    $(function () {
        $('.dropdown-toggle').dropdown();
    })
    var kindTable;
    kindTable=$('#kindsTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        serverSide: true,
        ordering:false,
        searching: false,
        paging:true,
        processing:true,
        //垂直滚轮
        scrollY: "600px",
        scrollCollapse: "true",
        renderer: "bootstrap",

        // "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 2,6,5 ] }],
        // "order": [4, "desc"],
        ajax:{
            url:"/kindInfo",
            type:'POST',
            cache:false,
            contentType:'application/json',
            data:function (d){
                var request={};
                request.searchMsg=$("#searchMsg").val().trim();
                request.pageSize=d.length;
                request.draw=d.draw;
                request.offset=d.start;
                return JSON.stringify(request);
            },
            dataFilter:function (json){
                json=JSON.parse(json);
                var returnData = {};
                returnData.draw = json.draw;
                returnData.recordsTotal = json.recordsTotal;  //返回数据全部记录
                returnData.recordsFiltered = json.recordsFiltered;  //后台不实现过滤功能，每次查询均视作全部结果
                returnData.data = json.data;  //返回的数据列表
                return JSON.stringify(returnData); //这几个参数都是datatable需要的，必须要
            }
        },
        columns:[
            {
                "data" : null,
                "orderable" : true,
                "sClass": "text-center",
                "sWidth": "10%",
            },
            {
                "data":"name",
                "orderable":false,
                "sClass":"text-center",
                "sDefaultContent":" ",
                "sWidth": "15%",

            },
            {
                "data":"img",
                "orderable":false,
                "sClass":"text-center",
                "sDefaultContent":" ",
                "sWidth": "10%",
                render:function (data, type, row, meta){
                    var img=row.img;
                    return "<img style='width:100px;height:50px;align:center' src='"+img+"'></img>";
                }

            },
            {
                "data":"introduce",
                "orderable":false,
                "sClass":"text-center",
                "sDefaultContent":" ",
                "sWidth": "35%",

            },
            {
                "data":"articleCount",
                "orderable":false,
                "sClass":"text-center",
                "sDefaultContent":" ",
                "sWidth": "15%",

            },
            {
                "orderable": false,
                "targets": 2,//操作按钮目标列
                "data": null,
                "sWidth": "15%",
                'sClass': "text-center",
                "render": function (data, type, row, meta) {
                    var id = row.id;
                    var html = "";
                    html += "<a href='/editKind?kindId=" + id + "'   class=' btn btn-pill btn-success ' title='编辑'><i class='fa fa-edit'></i></a>"
                    html += "<button onclick='deleteData(" + id + ")'  class=' btn btn-pill  btn-danger ' title='删除'><i class='fa fa-trash'></i></button>"
                    return html;
                }
            }
        ],
        fnDrawCallback :function () {
            let api = this.api();
            let startIndex = api.context[0]._iDisplayStart;//获取本页开始的条数
            api.column(0).nodes().each(function(cell, i) {
                cell.innerHTML = startIndex + i + 1;
            });
        },
    });

    $("#searchButton").click(function () {
        kindTable.ajax.reload(null,false);
    });


//add
    var src;
    $(function (){
        new AjaxUpload('uploadKindCoverImg',{
            action:'/admin/image/uploads',
            name:'image',
            autoSubmit:true,
            responseType:'json',
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的文件！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r != null && r.code == 200) {
                    $("#kindCoverImg").attr("src", r.data);
                    // window.console.log(r.data);
                    // window.console.log($("#articleCoverImg").attr("src"));
                    src=r.data;
                    $("#kindCoverImg").attr("style", "width: 128px;height: 128px;display:block;");
                    return false;
                } else {
                    alert("error");
                }
            }
        });
    });

    function addKind(){
        let name=$('#name').val().trim();
        let introduce=$('#info').val().trim();
        let kindCoverImg=src;

        if(isNull(name)){
            swal("请输入分类名称", {
                icon: "error",
            });
            return;
        }
        if (!validLength(name, 15)) {
            swal("名称过长", {
                icon: "error",
            });
            return;
        }
        if (isNull(introduce)) {
            swal("请输入描述信息", {
                icon: "error",
            });
            return;
        }
        if(isNull(kindCoverImg)){
            swal("封面图片不能为空", {
                icon: "error",
            });
            return;
        }
        var swlMessage = '保存成功';
        var data={
            "name":name,
            "introduce":introduce,
            "img":kindCoverImg
        };
        $.ajax({
            type: 'POST',//方法类型
            url: '/createKind',
            contentType: 'application/json',
            data: JSON.stringify(data),
            dataType:'json',
            success: function (result) {
                //if (result.code == 200)
                if (result.code==200) {
                    console.log(result.code);
                    console.log(result.data);
                    swal({
                        title: swlMessage,
                        type: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#1baeae',
                        confirmButtonText: '返回',
                        confirmButtonClass: 'btn btn-success',
                        buttonsStyling: false
                    }).then(function () {
                        window.location.href = "/kindManage";
                    })
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        })

    }

    function deleteData(id){
        swal({
            title: "确定将此分类永久删除?",
            text: "一旦删除，不可还原，关联文章将分类置空放入回收站",
            icon: 'warning',
            buttons:true,
            dangerMode:true,
        }).then((willDelete=>{
            if(willDelete){
                $.ajax({
                    type: 'POST',
                    url:'/deleteKind',
                    dataType:'json',
                    data:{kindId:id},
                    success:function (result) {
                        console.log(result);

                        if(result.code==200){
                            swal("删除成功", {
                                icon: "success",
                            });
                            kindTable.ajax.reload(null,false);
                        }else {
                            swal(result.message, {
                                icon: "error",
                            });
                        }
                    }
                });
            }
        }));

    }


</script>
<!-- END Java Script for this page -->

</body>
</html>